<template>
  <div class="layout-container" :class="{'old': elder}">
    <div class="layout-section">
      <div>
        <top-header :show-elder="false" :auth-check="true" @setElder="setElderByChild"></top-header>

        <apply-notice :user-type="0"></apply-notice>

        <div class="com-contain">
          <div style="padding: 8px 0">
            <div class="form-label">
              <span class="required">*</span>企业名称
            </div>
            <div class="form-input">
              <el-autocomplete class="layout-tab-search eraq-ent-inputer" v-model="formData.unitName"
                               :fetch-suggestions="queryNames" placeholder="请输入企业名称"
                               :trigger-on-focus="false" style="width: 100%;"/>
            </div>

            <div class="form-label">申请人员</div>
            <div class="form-input" style="line-height: 50px;">
              <van-radio-group v-model="legal" direction="horizontal">
                <van-radio :name="true">我是法定代表人</van-radio>
                <van-radio :name="false">我是受委托人</van-radio>
              </van-radio-group>
            </div>

            <div class="form-label" v-if="legal">
              <span class="required">*</span>人脸识别
            </div>
            <div class="form-input" v-if="legal" style="text-align: center;">
              <van-button type="info" style="width: 90%;" plain @click="realAuth">开始人脸识别</van-button>&nbsp;
            </div>

            <upload-file ref="attr01" caption="受托人身份证" fn="new" file-type="01" :unid="formData.unid"
                         v-if="!legal"/>

            <upload-file ref="attr02" caption="法人委托书" fn="new" file-type="02" :unid="formData.unid" v-if="!legal"/>

            <div class="form-label">
              <span class="required">*</span>联系电话
            </div>
            <div class="form-input">
              <input type="text" placeholder="请输入联系电话" v-model="formData.mobile"/>
            </div>
          </div>
        </div>
        <div>
          <div class="form-btns">
            <button class="primary" @click="doSave">提交申请</button>
            <button @click="$router.push({path: '/list'})">返回列表</button>
          </div>
        </div>

        <footer-right></footer-right>
      </div>
    </div>

    <footer-nav :active-index="-1"></footer-nav>
  </div>
</template>

<script>
import {apiReqEntNames, apiGetNew, apiSaveinner, apiSaveAuthId, apiGetEntInfo, apiGetFaceReuquestId} from "@/api/apply";
import TopHeader from "@/components/topHeader";
import FooterRight from "@/components/footerRight";
import FooterNav from "@/components/footerNav";
import ApplyNotice from "@/components/applyNotice";
import {ajaxUtils, strUtils} from "@/utils/lwUtils";
import UploadFile from "@/components/uploadFile";
import {ajaxFailed} from "@/utils/ruoyi";

export default {
  components: {UploadFile, ApplyNotice, FooterNav, FooterRight, TopHeader},
  data() {
    return {
      elder: false, legal: true, authId: "",
      comRows: [],
      formData: {
        unid: "", applyfrom: "", mobile: "", usertype: "", unitName: ""
      },
    }
  },
  created() {
    apiGetNew().then(res => {
      this.formData = res.data;
    }).catch(err => {
      this.formData = {unid: "/", applyfrom: "", mobile: "", usertype: "", unitName: ""};
      ajaxUtils.showErr(err);
    });
  },
  methods: {
    queryNames: function (queryString, cb) {
      apiReqEntNames(queryString, cb);
    },
    doSave: function () {
      if (this.formData.unitName === "" || this.formData.mobile === "") {
        this.$eraqDlg.warning("请填写企业名称及联系人电话");
        return;
      }

      if (!this.legal && (this.$refs.attr01.fileList.length === 0 || this.$refs.attr02.fileList.length === 0)) {
        this.$eraqDlg.warning("请上传相应的申请材料");
        return;
      }

      if (this.legal && this.authId === "") {
        this.$eraqDlg.warning("请完成人脸识别操作");
        return;
      }

      let ents = [];
      ents.push(this.formData.unitName);

      apiSaveinner(this.formData.unid, ents, 0, this.formData.mobile).then(res => {
        console.log(res);
        if (ajaxUtils.checkFail(res.code, res.msg)) {
          return;
        }

        this.$router.push({path: "/list"});
      }).catch(() => {
      });
    },
    //子组件调用方法，设置老年模式
    setElderByChild: function (elder) {
      this.elder = elder;
    },
    //发起人脸识别操作：1、获取企业法人信息
    realAuth: function () {
      if (this.formData.unitName === "") {
        this.$eraqDlg.warning("请填写企业名称");
        return;
      }

      apiGetEntInfo(this.formData.unitName).then(res => {
        if (ajaxUtils.checkFail(res.code, res.msg)) {
          return;
        }

        //打开人脸识别窗口
        this.getRealAuthRequestId(res.data.unitCerno, res.data.unitLerep);
      }).catch(() => {
      });
    },
    //2、取得人脸识别 requestId
    getRealAuthRequestId: function (certId, certName) {
      if (strUtils.isEmpty(certId) || strUtils.isEmpty(certName)) {
        this.$eraqDlg.warning("企业法人信息不完善，请与管辖单位联系。");
        return;
      }

      //获取人脸识别的 requestId
      apiGetFaceReuquestId({unid: "-", certNo: certId, certName: certName}).then(res => {
        if (ajaxUtils.isFail(res.code, res.msg)) {
          return;
        }
        this.openRealAuth(res.data);
      }).catch(() => {
      });
    },
    //3、执行人脸识别
    openRealAuth(requestId) {
      if (strUtils.isEmpty(requestId)) {
        this.$eraqDlg.warning("人脸识别组件初始化异常");
        return;
      }

      ZWJSBridge.onReady(() => {
        ZWJSBridge.authentication({
          accessKey: 'BCDSGA_8296367e54435f70d99226597861a6d6',
          requestId: requestId
        }).then(data => {
          if (!data.pass) {
            this.$eraqDlg.warning("人脸校验失败：" + data.msg);
            return;
          }
          this.doSaveAuth(requestId);
        }).catch(() => {
        });
      });
    },
    //4、人脸识别结果回调
    doSaveAuth: function (authId) {
      if (strUtils.isEmpty(authId)) {
        this.$eraqDlg.warning("未获取到返回的校验码或获取有误。");
        return;
      }
      this.authId = authId;
      apiSaveAuthId(this.formData.unid, authId).then(res => {
        if (ajaxUtils.checkFail(res.code, res.msg)) {
          return;
        }
        this.$eraqDlg.alert("人脸识别操作成功");
      }).catch(() => {
      });
    },
  }
}
</script>

<style lang='scss' scoped>
@import "src/css/home";

.layout-section {
  background: #f2f3f9;
}

.van-uploader__input-wrapper {
  width: 100% !important;
}
</style>
